<template>
  <view class="take">
    <view class="hd">
      <view class="left" v-if="detail.answer" @click="goUser(detail.answer.user)">
        <view class="avatar">
          <image :src="setUrl(detail.answer.user.avatar)" class="img"></image>
          <image src="../../static/vip.png" class="vip"></image>
        </view>
        <view class="fo">
          <view class="user">
            <text class="name">{{ detail.answer.user.nickname }}</text>
            <view class="icon" :class="peopleColor[detail.answer.identity]">{{ peopleType[detail.answer.identity] }}</view>
          </view>
          <view class="time">{{ timeFormat(detail.createtime, 'mm-dd hh:MM') }} IP属地：{{ detail.answer.user.city ? detail.answer.user.city : '未知' }} 阅读人数：{{ detail.answer.views }}</view>
        </view>
      </view>
      <view class="right" v-if="order">
        <!-- #ifdef APP-PLUS -->
        <template v-if="detail.answer && userInfo.user_id != detail.answer.user.id && platform != 'h5'">
          <view @click="followUser">
            <view class="setMarrow fish" v-if="detail.answer.user.is_follow">已关注</view>
            <view class="setMarrow " v-else>关注</view>
          </view>
        </template>
        <!-- #endif -->
        
        <!-- <view class="marrow">精华</view> -->
        <view class="more" v-if="detail.is_my">
          <uv-icon name="more-dot-fill" color="#B8B8B8" size="20"></uv-icon>
        </view>
      </view>
    </view>
    <view>
      <view class="carry" v-if="detail.user">
        <view class="title">{{ detail.user.nickname }} 提问：</view>
        <view class="goll">{{ detail.content }}</view>
        <view class="picture not" v-if="detail.images">
          <view class="environ" v-for="(item, idx) in detail.images.split(',')" :key="idx" @click="previewImage(detail.images.split(','), item)">
            <image :src="setUrl(item)" class="img" mode="center"></image>
          </view>
        </view>
      </view>
      <view class="content" v-if="detail.answer && detail.answer.content && detail.is_join == 1">
        <uv-read-more ref="readMore" show-height="200rpx" closeText='查看全文' openText='收起' color='#465B89' fontSize='30rpx' textIndent='0' :toggle="false" :shadowStyle="{ backgroundImage: 'none' }">
          <view class="content">
            <uv-parse :content="detail.answer.content"></uv-parse>
          </view>
        </uv-read-more>
      </view>
      <view class="content not" v-if="detail.answer && detail.is_join == 0">
        {{ detail.answer.content }}
      </view>
    </view>
    <view class="picture" v-if="detail.answer && detail.answer.images">
      <view class="environ" v-for="(item, idx) in detail.answer.images.split(',')" :key="idx" @click="previewImage(detail.answer.images.split(','), item)">
        <image :src="setUrl(item)" class="img" mode="center"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { setUrl, toast } from '@/common';
import { computed, onMounted } from 'vue';
import { useUser } from '@/store';
import { post } from '@/api';

const emit = defineEmits(['followClick']);
const platform = uni.$uv.platform;

const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  },
  order: {
    type: Boolean,
    default: true
  },
  isClick: {
    type: Boolean,
    default: true
  }
})

const store = useUser();
const userInfo = uni.$uv.deepClone(store.userInfo);
const peopleType = { 1: '群主', 2: '合伙人', 3: '嘉宾' };
const peopleColor = { 1: 'red', 2: 'yellow', 3: 'blue' }

// 关注
function followUser(){
  const params = {
    follow_user_id: props.detail.answer.user.id,
    way: props.detail.answer.user.is_follow == 1 ? 2 : 1
  }
  post('api/user_follow/followUser', params).then(res => {
    if(res.code == 1){
      emit('followClick', {type: 'is_follow', userId: props.detail.user.id});
    }
  })
}
function goUser(row){
  // H5页面不能点击
  // #ifdef WEB
  return;
  // #endif
  
  
  if(!isClick) return;
  uni.navigateTo({
    url: `/pages/mine/myTheme/index?id=${row.id}`
  });
}
// 放大图片
function previewImage(arr, row){
  // #ifdef WEB
  toast('请前往APP查看');
  return;
  // #endif
  let list = arr.map(e => setUrl(e));
  uni.previewImage({
    urls: list,
    current: setUrl(row),
  });
}
</script>

<style lang="scss" scoped>
  .take{
    padding-top: 40rpx;
    padding-bottom: 30rpx;
    border-top: 1px solid #EFEFEF;
    &:first-child{
      border-top: 0;
    }
    
    .picture{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-bottom: 36rpx;
      &.not{
        padding-bottom: 0;
      }
      .environ{
        width: 32%;
        height: 200rpx;
        margin-right: 1%;
        margin-bottom: 1%;
        border-radius: 12rpx;
        overflow: hidden;
      }
      .environ:nth-child(1):nth-last-child(2),
      .environ:nth-child(2):nth-last-child(1),
      .environ:nth-child(1):nth-last-child(3),
      .environ:nth-child(2):nth-last-child(2),
      .environ:nth-child(3):nth-last-child(1) {
          width: 32%;
      }
      
      .environ:nth-child(1):nth-last-child(4),
      .environ:nth-child(2):nth-last-child(3),
      .environ:nth-child(3):nth-last-child(2),
      .environ:nth-child(4):nth-last-child(1) {
          width: 49%;
          height: 300rpx;
      }
    }
    .content{
      font-weight: 400;
      font-size: 30rpx;
      color: #2B2B2B;
      margin-bottom: 24rpx;
      :deep(.uv-read-more__toggle){
        justify-content: flex-start;
        margin-top: 24rpx;
      }
      &.not{
        overflow:hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
    .carry{
      font-weight: 400;
      font-size: 30rpx;
      color: #737373;
      border-left: 2px solid #EFEFEF;
      padding: 10rpx 0;
      padding-left: 20rpx;
      margin-bottom: 20rpx;
      .goll{
        padding-bottom: 20rpx;
      }
      .title{
        padding-bottom: 10rpx;
      }
    }
    .hd{
      width: 100%;
      padding-bottom: 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        align-items: center;
        .fo{
          padding-left: 20rpx;
          .time{
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
          }
          .user{
            display: flex;
            align-items: center;
            .icon{
              font-weight: 400;
              font-size: 20rpx;
              color: #FFFFFF;
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              border-radius: 32rpx;
              &.red{
                background-color: #E43222;
              }
              &.yellow{
                background-color: #F0BA16;
              }
              &.blue{
                background-color: #465B89;
              }
            }
            .name{
              font-weight: 500;
              font-size: 32rpx;
              color: #2B2B2B;
              padding-right: 8rpx;
            }
          }
        }
        .avatar{
          width: 70rpx;
          height: 70rpx;
          position: relative;
          .img{
            border-radius: 50%;
            overflow: hidden;
          }
          .vip{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
      .right{
        display: flex;
        align-items: center;
        .more{
          margin-left: 30rpx;
        }
        .setMarrow{
          width: 124rpx;
          height: 44rpx;
          background: #FFFFFF;
          border: 1rpx solid #E43222;
          border-radius: 44rpx;
          line-height: 44rpx;
          text-align: center;
          font-weight: 400;
          font-size: 24rpx;
          color: #E43222;
          box-sizing: content-box;
          &.fish{
            color: #999999;
            border-color: #999999;
          }
        }
        .marrow{
          font-weight: 400;
          font-size: 24rpx;
          color: #BF971E;
          width: 96rpx;
          height: 48rpx;
          background: #FFF7DE;
          border-radius: 48rpx;
          line-height: 48rpx;
          text-align: center;
          margin-left: 30rpx;
        }
      }
    }
  }
</style>